<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{padding: 0;margin: 0;}
	.news{width: 500px;height: 50px;border: 5px solid blue;margin: 10px auto;position: relative;overflow: hidden;}
	.news ul{position: absolute;top: 0;left: 0;}
	.news ul li{width: 500px;height: 50px;font-size: 20px;line-height: 50px;text-align: center;color: white;font-family: 微软雅黑;
		list-style: none;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".news").each( function() {
			var a = $(this)[0];
			a.c = 0;
			var _this=$(this);
			a.run=function(){
			a.c=a.c+1;
			if(a.c==6){
				_this.children('ul').css('top', '0');
				a.c=1;
			}
			// 计算top值
			a.t = a.c*-50;
			// 让ul运动
			_this.children('ul').animate({'top':a.t+'px'}, 400);	
			}
			a.timer=setInterval(a.run,1000);		
			_this.hover(function() {
				clearInterval(a.timer);
			}, function() {
				a.timer=setInterval(a.run,1000);		
			});
		})
		//一组代码控制不了多个定时器**************开始
		// var c = 0;
		// function run(){
		// 	c++;
		// 	if(c==6){
		// 		$('.news ul').css('top', '0');
		// 		c=1;
		// 	}
		// 	// 计算top值
		// 	var t = c*-50;
		// 	// 让ul运动
		// 	$('.news ul').animate({'top':t+'px'}, 400);
		// }
		// var timer=setInterval(run,1000);
		// $(".news").hover(function() {
		// 	clearInterval(timer);
		// }, function() {
		// 	timer=setInterval(run,1000);
		// });
		//一组代码控制不了多个定时器**************结束
	})
</script>
</head>
<body>
	<div class="news">
		<ul>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>
			<li style="background:orange;">谷歌收购Nest冷解读：智能家居春天还太远</li>
			<li style="background:green;">90后小米员工离职创立安全套品牌“大象”</li>
			<li style="background:blue;">特斯拉将在中国建免费充电站</li>
			<li style="background:grey;">苹果谷歌从不参加CES，但它们却无处不在</li>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>	
		</ul>
	</div>
	<div class="news">
		<ul>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>
			<li style="background:orange;">谷歌收购Nest冷解读：智能家居春天还太远</li>
			<li style="background:green;">90后小米员工离职创立安全套品牌“大象”</li>
			<li style="background:blue;">特斯拉将在中国建免费充电站</li>
			<li style="background:grey;">苹果谷歌从不参加CES，但它们却无处不在</li>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>		
		</ul>
	</div>
		<div class="news">
		<ul>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>
			<li style="background:orange;">谷歌收购Nest冷解读：智能家居春天还太远</li>
			<li style="background:green;">90后小米员工离职创立安全套品牌“大象”</li>
			<li style="background:blue;">特斯拉将在中国建免费充电站</li>
			<li style="background:grey;">苹果谷歌从不参加CES，但它们却无处不在</li>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>	
		</ul>
	</div>
		<div class="news">
		<ul>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>
			<li style="background:orange;">谷歌收购Nest冷解读：智能家居春天还太远</li>
			<li style="background:green;">90后小米员工离职创立安全套品牌“大象”</li>
			<li style="background:blue;">特斯拉将在中国建免费充电站</li>
			<li style="background:grey;">苹果谷歌从不参加CES，但它们却无处不在</li>
			<li style="background:purple;">谷歌收购NEST，进军智能家居？错！</li>	
		</ul>
	</div>
</body>
</html>
